<script setup>
import { useRoute, useRouter } from 'vue-router'
import { computed } from 'vue'

const route = useRoute() // 获取当前路由
const router = useRouter() // 获取路由实例

const studentlist = () => {
    router.push('/adminindex')
}
const eamlist = () => {
    router.push('/eamlist')
}

const isStudentListActive = computed(() => route.path === '/adminindex')
const isEamListActive = computed(() => route.path === '/eamlist')
</script>
<template>
    <div class="adminmanu">
        <div class="title">
            <p>导航栏</p>
        </div>
        <div class="list">
            <ul>
                <li>
                    <input type="button" value="学生列表" @click="studentlist" :class="{ active: isStudentListActive }">
                </li>
                <li>
                    <input type="button" value="考试" @click="eamlist" :class="{ active: isEamListActive }">

                </li>
            </ul>
        </div>
    </div>
</template>
<style scoped>
.adminmanu {
    margin: 5px;
    background-color: #fdf9eb;
    width: 300px;
    height: 98%;
}

.title {
    width: 100%;
    height: 30px;
}

.List {
    flex-grow: 1;
    width: 100%;
    background-color: #fdf9eb;
    display: flex;
    flex-direction: column;
}

input {
    width: 100%;
    height: 40px;
    background-color: #ffeba3;
    border: none;
    border-bottom: 2px solid rgb(0, 0, 0);
}
/* 激活状态的样式 */
input.active {
    background-color: #ffcc00; /* 激活时的背景色 */
    font-weight: bold; /* 加粗字体 */
    border-bottom: 2px solid #0000ff; /* 激活时的边框颜色 */
}
</style>